<template>
	<view class="container">
		<view class="row">
			<view class="label">
				姓名
			</view>
			<view class="value">
				<u--input
				    placeholder="请输入姓名"
				    border="surround"
					v-model="form.name"
				  ></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				身份证号
			</view>
			<view class="value">
				<u--input
				    placeholder="请输入身份证号"
				    border="surround"
					v-model="form.id_card"
				  ></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				手机号
			</view>
			<view class="value">
				<u--input
				    placeholder="请输入手机号"
				    border="surround"
					v-model="form.phone"
				  ></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				地址
			</view>
			<view class="value">
				<u--input
				    placeholder="请输入地址"
				    border="surround"
					v-model="form.address"
				  ></u--input>
			</view>
		</view>
		<view class="row">
			
		</view>
		<view class="title">
			身份证人像照片
		</view>
		<image :src="form.id_card_front" mode="scaleToFill" style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-if="form.id_card_front" @click="uploadFile('front')"></image>
		<image src="/static/images/authentication/id1.png" mode="widthFix" style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-else  @click="uploadFile('front')"></image>
		<view class="title">
			身份证国徽照片
		</view>
		<image :src="form.id_card_back" mode="scaleToFill" style="width: 268rpx;height: 186rpx;;margin: 20rpx 0;" v-if="form.id_card_back"  @click="uploadFile('back')"></image>
		<image src="/static/images/authentication/id2.png" mode="widthFix" style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-else @click="uploadFile('back')"></image>
		<bottomComponent>
			<view class="bottom-btn" @click="submitHandler">
				{{form.id && form.audit_status == 0?'审核中':'提交审核'}}
			</view>
		</bottomComponent>
	</view>
</template>

<script>
	import utils from "@/utils/common.js"
	import bottomComponent from "@/components/bottomComponent/index.vue"
	import {
		roleSave,
		roleDetail
	} from "@/api/role.js"
	export default {
		components: {
			bottomComponent
		},
		data(){
			return {
				form: {
					id_card_front: "",
					id_card_back: ""
				}
			}
		},
		onLoad(e) {
			const {id} = e
			if(id){
				roleDetail({id})
				.then(res => {
					this.form = res
				})
			}
		},
		methods: {
			submitHandler(){
				if(this.form.id && this.form.audit_status == 0){
					uni.showToast({
						title: "审核中，请等待管理员审核",
						icon: "none"
					})
					return
				}
				roleSave({
					...this.form,
					role_type: 'role_normal'
				})
				.then(res => {
					uni.showToast({
						title: "已提交审核",
						icon: "none",
						success() {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							},500)
						}
					})
				})
			},
			uploadFile(type){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: async(res) => {
						console.log(res.tempFilePaths)
						const result = await utils.uploadFileToOss(res.tempFilePaths[0])
						if(type == 'front'){
							this.form.id_card_front = result
						}else{
							this.form.id_card_back = result
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.container{
		margin: 10rpx auto;
		width: 730rpx;
		padding: 18rpx 28rpx 160rpx;
		background-color: #fff;
		box-sizing: border-box;
		.row{
			display: flex;
			padding-top: 10rpx;
			align-items: center;
			.label{
				margin-right: 20rpx;
				width: 150rpx;
				text-align: justify;
				text-align-last: justify;
				/*兼容ie*/
				text-justify: distribute-all-lines;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				line-height: 52rpx;
			}
		}
		.row+.row{
			padding-top: 20rpx;
			margin-top: 10rpx;
			border-top: 2rpx solid #F5F5F5;
		}
		.title{
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
		}
	}
	.bottom-btn{
		width: 630rpx;
		line-height: 86rpx;
		background: #2B5BF8;
		border-radius: 86rpx;
		font-weight: 500;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>